<script setup>
import { getUserNumApi } from '@/api/user'
import { ref } from 'vue'
import { CountTo } from 'vue3-count-to'
import { useRouter } from 'vue-router';
const userNum = ref({})
const router = useRouter()
async function getUserNumber() {
  const res = await getUserNumApi()
  userNum.value = res.data
}
getUserNumber()
function handleClick(){
  router.push('/map')
}
</script>

<template>
  <div class="list-wrapper">
    <div class="list">
      <div class="left">
        <span class="icon iconfont icon-renshu" style="color: #40c9c6"></span>
        <div class="decoration-circle"></div>
      </div>
      <div class="right">
        <div class="top">学生总数</div>
        <div class="bottom">
          <count-to :startVal="0" :endVal="userNum[0]" :duration="3000"></count-to>
        </div>
      </div>
      <div class="decoration-line"></div>
    </div>
    <div class="list">
      <div class="left">
        <span class="icon iconfont icon-jiaoshi" style="color: #36a3f7"></span>
        <div class="decoration-circle"></div>
      </div>
      <div class="right">
        <div class="top">辅导员总数</div>
        <div class="bottom">
          <count-to :startVal="0" :endVal="userNum[1]" :duration="3000"></count-to>
        </div>
      </div>
      <div class="decoration-line"></div>
    </div>
    <div class="list" @click="handleClick">
      <div class="left">
        <span class="icon iconfont icon-qiye" style="color: #f4516c"></span>
        <div class="decoration-circle"></div>
      </div>
      <div class="right">
        <div class="top">合作企业总数</div>
        <div class="bottom">
          <count-to :startVal="0" :endVal="userNum[2]" :duration="3000"></count-to>
        </div>
      </div>
      <div class="decoration-line"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.list-wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  .list {
    width: 450px;
    height: 100px;
    padding: 0 35px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    position: relative;
    border-radius: 12px;
    overflow: hidden;

    .decoration-circle {
      position: absolute;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(64, 201, 198, 0.1);
      left: -20px;
      top: -20px;
      z-index: 1;
    }

    .decoration-line {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 6px;
      background: linear-gradient(to bottom, #40c9c6, transparent);
    }

    .left {
      position: relative;
      z-index: 2;
      .icon {
        font-size: 40px;
        transition: all 0.3s;
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .top {
        font-size: 20px;
        font-weight: bold;
        background: linear-gradient(to right, #333, #666);
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
      }
      .bottom {
        color: #666;
        font-weight: bold;
        margin-top: 10px;
        font-size: 24px;
      }
    }

    &:hover {
      box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
      transform: translateY(-5px);
      cursor: pointer;

      .icon {
        transform: scale(1.1);
      }
    }

    &:nth-child(2) {
      .decoration-circle {
        background: rgba(54, 163, 247, 0.1);
      }
      .decoration-line {
        background: linear-gradient(to bottom, #36a3f7, transparent);
      }
    }

    &:nth-child(3) {
      .decoration-circle {
        background: rgba(244, 81, 108, 0.1);
      }
      .decoration-line {
        background: linear-gradient(to bottom, #f4516c, transparent);
      }
    }
  }
}
</style>
